<template>
    <div class="flex flex-col">
        <div class="w-2/3 h-36 bg-slate-500 flex justify-center place-self-center my-5">
            <div>
                <img src="/vite.svg" class="logo" alt="Vite logo" />
                <p class="text-red-100 text-lg underline place-self-center">App.vue</p>
            </div>
        </div>
        <!-- <div class="my-4">
            <el-button class="" @click="toFoo">to foo</el-button>
            <el-button @click="toBar">to bar</el-button>
            <el-button @click="tologin">to login</el-button>
            <el-button @click="toPermission">to permission</el-button>
        </div> -->

        <!-- <p :style="{ color: appStore.color }">颜色</p> -->
        <router-view></router-view>
    </div>
</template>
<script setup lang="ts">
import useAppStore from "@/store/modules/app";
import { useRouter } from "vue-router";

const appStore = useAppStore();
const router = useRouter();

function toFoo() {
    router.push({
        path: "/foo",
    });
}

function toBar() {
    router.push({
        path: "/bar",
    });
}
function tologin() {
    router.push({
        path: "/",
    });
}
function toPermission() {
    router.push({
        path: "/permission",
    });
}
</script>

<style scoped>
.logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
    transition: filter 300ms;
}
.logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
    filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
